Aggiungi un pulsante di azione mobile

Prova il modo di comporre
Jetpack Compose è il toolkit per la UI consigliato per Android. Scopri come aggiungere componenti in Compose.
Pulsante di azione mobile →

Un pulsante di azione sovrapposto (FAB) è un pulsante circolare che attiva l'azione principale nell'interfaccia utente della tua app. Questa pagina mostra come aggiungere il FAB al layout, personalizzare alcuni aspetti del suo aspetto e rispondere ai tocchi del pulsante.

Per scoprire di più su come progettare un pulsante di azione sovrapposto nella tua app in base alle linee guida di Material Design, consulta anche Pulsanti: pulsante di azione sovrapposto.

Figura 1. Un pulsante di azione mobile

Aggiungere il pulsante di azione mobile al layout

Il seguente codice mostra come FloatingActionButton dovrebbe apparire nel file di layout: 

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

Per impostazione predefinita, il pulsante di azione rapida è colorato dall'attributo colorAccent, che puoi personalizzare con la tavolozza dei colori del tema.

Puoi configurare altre proprietà del pulsante di azione rapida utilizzando gli attributi XML o i metodi corrispondenti, ad esempio:

  • Le dimensioni del FAB, utilizzando l'attributo app:fabSize o il metodo setSize().
  • Il colore dell'increspatura del pulsante di azione rapida, utilizzando l'attributo app:rippleColor o il metodo setRippleColor().
  • L'icona FAB, utilizzando l'attributo android:src o il metodo setImageDrawable().

Rispondere ai tocchi dei pulsanti

Puoi quindi applicare un View.OnClickListener per gestire i tocchi del pulsante di azione rapida. Ad esempio, il seguente codice mostra un Snackbar quando l'utente tocca il FAB:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Per ulteriori informazioni sulle funzionalità del FAB, consulta il riferimento API per FloatingActionButton.